<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24" ref="hMain">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入名称" clearable  prefix-icon="el-icon-search"
                        style="margin-bottom: 20px" />
                </div>
                <div class="head-container" :style="{height:tableHeight+'px'}" style="overflow-y: auto">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                        :filter-node-method="filterNode" :default-expanded-keys="expandedkeys" :style="style"
                        :current-node-key="currentNodekey" ref="tree" node-key="id" default-expand-all highlight-current
                        @node-click="handleNodeClick">
                      <template slot-scope="{ node, data }">
                        <span class="span-ellipsis" :title="node.label" :style="style">{{ node.label }}</span>
                      </template>
                    </el-tree>
                </div>
            </el-col>
            <!--用户数据-->
            <el-col :span="20" :xs="24">
                <el-row :gutter="10" class="mb8" ref="refbut">
                    <right-toolbar @queryTable="getList"></right-toolbar>
                </el-row>
                <el-table v-loading="loading" :data="generalList" :height="tableHeight" border>
                    <!-- <el-table-column type="selection" width="50" align="center" /> -->
                    <el-table-column label="序号" sortable align="center" type="index" />
                    <el-table-column label="角色" align="center" key="roleName" prop="roleName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="用户名" align="center" key="userName" prop="userName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="密码" align="center" key="password" prop="password"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" align="center" active-value="0" inactive-value="1"
                                @change="handleStatusChange(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                        <!-- v-if="scope.row.userId !== 1" -->
                        <template slot-scope="scope" >
                            <el-button  type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                                >修改密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>


        <!-- 添加或修改用户配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="30%" style="margin-top:8%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                <el-form-item label="密码：" prop="password">
                    <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listTenantTree, listSYS, updateSYS } from "@/api/manage/threeyuan";
import estimateTableHeight from '@/mixins/estimateTableHeight'//vue项目中element-tabel自动计算高度
export default {
    mixins: [estimateTableHeight], // 混入方法
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 立档单位表格数据
            generalList: null,
            // 弹出层标题
            title: "",
            //立档单位信息树lieb
            deptOptions: undefined,
            //默认展开的树节点
            expandedkeys: [],
            //默认选中的树节点
            currentNodekey: "",
            // 是否显示弹出层
            open: false,
            // 部门名称
            deptName: undefined,
            // 表单参数
            form: {

            },
            defaultProps: {
                children: "children",
                label: "label"
            },
            // 查询参数
            queryParams: {
                tenantCode: undefined,
            },

            // 表单校验
            rules: {
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
            },
            style: ''
        };
    },
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.getDeptTree();
        if (this.$store.getters.size == 'small') {
          this.style = 'font-size: 12px;'
        } else {
          this.style = 'font-size: 14px;'
        }
    },
    methods: {
        //解决vue+element— el-input 限制只能输入数字时和字母时与表单验证rules冲突问题
        salaryChange(e) {
            this.form.fondsCode = e.target.value;
        },
        /** 查询用户列表 */
        getList() {
            this.loading = true;
            listSYS(this.queryParams).then(response => {
                if (response.length > 0) {
                    this.generalList = response;
                    console.log(this.generalList, "===")

                }
                this.loading = false;
            }
            );
        },
        /** 查询立档单位树结构 */
        getDeptTree() {
            listTenantTree().then(response => {
                this.deptOptions = response.data;
                if (this.deptOptions.length > 0) {
                    if(this.deptOptions[0].children!=undefined ){
                      this.currentNodeKey = this.deptOptions[0].children[0].id;
                      this.expandedkeys.push(this.deptOptions[0].children[0].id);
                      this.$nextTick(() => {
                        this.$refs.tree.setCurrentKey(this.deptOptions[0].children[0].id)
                      })
                      this.queryParams.tenantCode = response.data[0].children[0].tenantCode;
                      this.getList();
                    }
                }

              this.loading=false;
            });
        },
        // 表单重置
        reset() {
            this.form = {
                tenantCode: this.queryParams.tenantCode,
                userId: null,
                password: null,
                status: null
            };
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            if (data.tenantCode==undefined || data.tenantCode=="" || data.tenantCode==null|| data.tenantCode=="null"){
              return;
            }
            this.queryParams.tenantCode = data.tenantCode;
            this.getList();
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },


        // 立档单位信息状态修改
        handleStatusChange(row) {
            console.log(row)
            let text = row.status === "0" ? "启用" : "停用";
            this.$modal.confirm('确认要"' + text + '""' + row.nickName + '"吗？').then(function () {
                return updateSYS({ userId: row.userId, status: row.status });
            }).then(() => {
                this.$modal.msgSuccess(text + "成功");
            }).catch(function () {
                row.status = row.status === "0" ? "1" : "0";
            });
        },


        //修改密码
        handleUpdate(row){
            this.open=true;
            this.title="修改密码";
            this.reset();
            this.form.userId=row.userId;

        },

        submitForm(){
            this.$refs["form"].validate(valid => {
                if(valid){
                    updateSYS({password:this.form.password,userId:this.form.userId,}).then(res=>{
                        this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                    })
                }
            })
        }

    }
}
</script>

